<template>
  <div class="panel vux-1px-tb">
    <a :href="'#/studentslist/' + list.id" class="panel-title vux-1px-b">
      <span class="con">{{list.grade + list.className}}</span>
      <span class="link">
        {{list.count}} <x-icon type="ios-arrow-right" size="16"></x-icon>
      </span>
    </a>
    <div class="panel-body">
      <p class="desc">{{list.school}}</p>
      <p class="desc">班级号：{{list.tag}}</p>
    </div>
  </div>
</template>

<script>
  /**
   * panel
   */
  export default{
    props: ['list']
  }
</script>

<style lang="less">
.panel {
  background: #fff;
  padding: 0 14px;
  margin-bottom: 14px;
  &:last-child {
    margin-bottom: 20px;
  }
  &-title {
    position: relative;
    display: block;
    height: 50px;
    .con {
      width: 100%;
      line-height: 51px;
      font-size: 16px;
      font-weight: 400;
      color: #333;
    }
    .link {
      position: absolute;
      right: 0;
      top: 14px;
      color: #333;
      svg {
        vertical-align: -2px;
      }
    }
  }
  &-body {
    padding: 10px 0;
    .desc {
      font-size: 14px;
      line-height: 1.8;
      color: #666;
    }
  }
}
</style>
